<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="pc/include :: header('我的支出')" />

    <link th:href="@{/js/ui-table/ui-table.css}" rel="stylesheet"/>
</head>
<body>
<th:block th:include="pc/include :: top" />
<div class="iw">
    <div class="crumbs">
        <p>当前位置：<a href="/">首页</a> > <a href="/user/center">个人中心</a> > 我的支出</p>
    </div>
    <div class="center_left">
        <th:block th:include="pc/include :: menu" />
    </div>
    <div class="center_right">
        <th:block th:include="pc/include :: menuheader" />
        <div class="task_head">
            <ul>
                <li id="li1" class="active">文档支出</li>
                <li id="li2">专题支出</li>
                <li id="li3">悬赏支出</li>
            </ul>
            <div class="line"></div>
        </div>
        <div class="tab_doc">
        </div>
        <div class="tab_topic" style="display: none">          
        </div>
        <div class="tab_reward" style="display: none">          
        </div>
    </div>
</div>
<th:block th:include="pc/include :: footer" />

<script th:src="@{/js/ui_stable/ui_stable.js}"></script>
<script>
    $(function () {
        $("#li1").click(function () {
            $(this).parent().find("li").removeClass("active");
            $("#li1").addClass("active");
            $(".line").css("left", "8px");
            $(".tab_doc").show();
            $(".tab_topic").hide();
            $(".tab_reward").hide();
        });

        $("#li2").click(function () {
            $(this).parent().find("li").removeClass("active");
            $("#li2").addClass("active");
            $(".line").css("left", "138px");
            $(".tab_doc").hide();
            $(".tab_topic").show();
            $(".tab_reward").hide();
        });

        $("#li3").click(function () {
            $(this).parent().find("li").removeClass("active");
            $("#li3").addClass("active");
            $(".line").css("left", "268px");
            $(".tab_doc").hide();
            $(".tab_topic").hide();
            $(".tab_reward").show();
        });
    });

    var url = "/user/purchasedoc";
    var opts = {
        pagesize: 20,
        pageNum: 1
    };
    var setting = {
        header: '<td d="type" style="min-width:60px;">项目</td>' +
                '<td d="title" style="min-width:100px;">标题</td>' +
                '<td d="nickname" style="min-width:60px;">上传者</td>' +
                '<td d="downpay" style="min-width:60px;">支出</td>' +                
                '<td d="insertdate" style="min-width:60px;">购买日期</td>',

        body: '<td>#remark</td>' +
                '<td><i class="#exten"></i><a href="/detail.htm?docid=#linkid.html"" target="_bank">#title</a></td>' +
                '<td>#nickname</td>' +
                '<td><span class="block">#glods 元</span></td>' +
                '<td>#note</td>'
    };
    $(".tab_doc").ui_stable(url, opts, setting);

    var url = "/user/purchasetopic";
    var opts = {
        pagesize: 20,
        pageNum: 1
    };
    var setting = {
        header: '<td d="type" style="min-width:100px;">项目</td>' +
                '<td d="title" style="min-width:60px;">标题</td>' +
                '<td d="glods" style="min-width:60px;">支出</td>' +
                '<td d="insertdate" style="min-width:60px;">日期</td>',

        body: '<td>#remark</td>' +
            '<td><i class="#exten"></i><a href="/detail.htm?docid=#linkid.html"" target="_bank">#title</a></td>' +
            '<td><span class="block">#glods 元</span></span></td>' +
            '<td>#note</td>',
    };
    $(".tab_topic").ui_stable(url, opts, setting);

    var url = "/user/purchasereward";
    var opts = {
        pagesize: 20,
        pageNum: 1
    };
    var setting = {
        header: '<td d="type" style="min-width:100px;">项目</td>' +
                '<td d="title" style="min-width:60px;">标题</td>' +
                '<td d="glods" style="min-width:60px;">支出</td>' +
                '<td d="insertdate" style="min-width:60px;">日期</td>',


        body: '<td>#remark</td>' +
            '<td><i class="#exten"></i><a href="/detail.htm?docid=#linkid.html"" target="_bank">#title</a></td>' +
            '<td><span class="block">#glods 元</span></span></td>' +
            '<td>#note</td>',
    };
    $(".tab_reward").ui_stable(url, opts, setting);
</script>